import React from 'react'
import type { FC, PropsWithChildren } from 'react'
import { Button, ConfigProvider } from 'antd'

interface IProps {
  type?: 'default' | 'link' | 'text' | 'primary' | 'dashed' | undefined
  size?: 'large' | 'small' | 'middle'
  color?: string
  onClick?: () => void
}

const MyBtn: FC<PropsWithChildren<IProps>> = ({
  type = 'default',
  color = '#d9d9d9',
  size = 'middle',
  children,
  onClick = () => {}
}) => {
  return (
    <ConfigProvider
      theme={{
        components: {
          Button: {
            defaultActiveBorderColor: color,
            defaultBg: color,
            defaultActiveColor: color,
            defaultBorderColor: color,
            defaultColor: '#fff',
            defaultHoverBorderColor: color,
            defaultHoverColor: color
          }
        }
      }}
    >
      <Button
        type={type}
        size={size}
        onClick={() => {
          onClick()
        }}
      >
        {children}
      </Button>
    </ConfigProvider>
  )
}

export default MyBtn
